<template>
    <div>
        <h1>过滤器</h1>
        <!-- 
            filters过滤器：在不改变原数据的情况下，对数据进行处理然后显示到页面上
            在原数据的基础上生成了一个新数据，并且不会影响到原数据
           渲染的过程

           {{ data中的变量 | 函数名 }}
        -->
        <!-- {{ yhb | changeMsg }} -->
        <p>
            <!-- changeMsg默认帮我们偷偷传递了yhb，所以不需要传了 -->
            {{ yhb | changeMsg(zzh) }}
        </p>
    </div>
</template>
<script>
export default {
    // 变量
    data(){
        return{
            yhb:"我是于董",
            zzh:"我是郑致和"
        }
    },
    // 放函数
    methods:{},
    // 过滤器：放函数
    // 里面定义的函数会接收一个参数这个参数就是原数据。其中必须有return关键字，将原数据处理后返回出去
    filters:{
        // 默认会接收一个参数，这个参数就是原数据
        changeMsg(val,res){
            console.log(val,"原数据")
            // 在过滤器中是访问不了this的，所以需要传进来
            console.log(res,"传进来的zzh")
            // 对原数据进行处理
            return val+"********"
        }
    }
}
</script>